
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>设置-个人信息</title>
     <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css" />
</head>

<body>
   	<!--页面顶部白条条，由js动态加载-->
	<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
    <div id="nav-bottom"><ly-top/></div>
    <!--<script type="text/javascript">$("#nav-bottom").load("top.html");</script>-->
    <script src="./js/vue/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <script type="text/javascript">
        var cartVm = new Vue({
            el: "#nav-bottom",
            components: {
                lyTop: () => import("./js/pages/top.js")
            },
        })
    </script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="pages/userInfo/distpicker.data.js"></script>
<script type="text/javascript" src="pages/userInfo/distpicker.js"></script>
<script type="text/javascript" src="pages/userInfo/main.js"></script>
</body>
    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img src="img/_/photo.png" alt=""></div>
                        <div class="person-account">
                            <span class="name">{{user.username}}</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd ><a href="home-index.html"   >我的订单</a></dd>
							<dd><a href="home-order-pay.html" >待付款</a></dd>
							<dd><a href="home-order-send.html"  >待发货</a></dd>
							<dd><a href="home-order-receive.html" >待收货</a></dd>
							<dd><a href="home-order-evaluate.html" >待评价</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 我的中心</dt>
							<dd><a href="home-person-collect.html" >我的收藏</a></dd>
							<dd><a href="home-person-footmark.html" >我的足迹</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 物流消息</dt>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="home-setting-info.html" >个人信息</a></dd>
							<dd><a href="home-setting-address.html" class="list-active" >地址管理</a></dd>
							<dd><a href="home-setting-safe.html" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6">
                    <div class="body userAddress">
                        <div class="address-title">
                            <span class="title">地址管理</span>
                            <a data-toggle="modal" data-target=".edit" data-keyboard="false"   class="sui-btn  btn-info add-new" @click="addAddress">添加新地址</a>
                            <span class="clearfix"></span>
                        </div>
                        <div class="address-detail">
                            <table class="sui-table table-bordered">
                                <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>地址</th>
                                        <th>联系电话</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody v-for="(add,i) in addrList" :key="i">
                                    <tr>
                                        <td>{{add.uname}}</td>
                                        <td>{{add.ad}}</td>
                                        <td>{{newItem(add.phone)}}</td>
                                        <td>
                                            <a data-toggle="modal" data-target=".edit" data-keyboard="false" @click="editItem(add.id)">编辑</a>
                                            <a href="#" @click="deleteAddress(add.id)">删除</a>
                                            <span v-if="add.ifdefault==false">
                                                <a href="#" @click="setDefault(add.id)">设为默认</a>
                                            </span>
                                            <span v-else>
                                                默认
                                            </span>
                                        </td>
                                    </tr>

                                    
                                </tbody>
                            </table>                          
                        </div>
                        <!--新增地址弹出层-->
                         <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit" style="width:580px;">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                                        <h4 id="myModalLabel" class="modal-title">{{isEdit ? '编辑': '新增'}}地址</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form action="" class="sui-form form-horizontal" @submit.prevent="submit">
                                            <div class="control-group">
                                            <label class="control-label">收货人：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" name="uname" v-model="address.uname">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">所在地区：</label>
                                            <div id="test">
                                                省：
                                                <select v-model="provinSelected">
                                                    <option v-for="item in provinList" :value="item.id">{{item.province}}</option>
                                                </select>
                                                市：
                                                <select v-model="citySelected">
                                                    <option v-for="item in cityList" :value="item.id">{{item.city}}</option>
                                                </select>
                                                区：
                                                <select v-model="areaSelected">
                                                    <option v-for="item in areaList" :value="item.id">{{item.area}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">详细地址：</label>
                                            <div class="controls">
                                                <input type="text" class="input-large" name="ad" v-model="address.ad">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" name="phone" v-model="address.phone">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">邮箱：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" name="email" v-model="address.email">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">地址别名：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" :value="an" name="an" >
                                            </div>
                                            <div class="othername">
                                                建议填写常用地址：<a href="javascript:;" class="sui-btn btn-default" @click="changevalue('家里')">家里</a>　<a href="javascript:;" class="sui-btn btn-default" @click="changevalue('父母家')">父母家</a>　<a href="javascript:;" class="sui-btn btn-default" @click="changevalue('公司')">公司</a>
                                            </div>
                                        </div>
                                        
                                        </form>
                                        
                                        
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" data-ok="modal" class="sui-btn btn-primary btn-large" @click="submit">确定</button>
                                        <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
                                    </div>
                                </div>
                            </div>
						</div>


                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="./js/vue/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            el:"#account",
            data:{
                ly,
                user:{},
                provinRows:[],
                cityRows:[],
                areaRows:[],
                provinSelected:"",
                provinList:[],
                citySelected:"",
                cityList:[],
                areaSelected:"",
                areaList:[],
                an:"",
                address:{
                    an:"",
                    province:"",
                    city:"",
                    uarea:""
                },
                addrList:[],
                isEdit:false,
                editAddress:{}
            },
            created(){
                //获取省市区三级数据
                ly.http.get("/item/category/provin").then(res=>{
                    this.provinRows=res.data
                    this.provinList=this.provinRows;
                    this.provinSelected = this.provinList.length>0 ? this.provinRows[0].id : "";
                })
                ly.http.get("/item/category/area").then(res=>{
                    this.areaRows=res.data
                    var val=this.cityList[0].cityid;
                    this.areaList=this.areaRows.filter(function (x) {return x.cityid==val});
                    this.areaSelected = this.areaList.length>0 ? this.areaList[0].id : "";
                })
                ly.http.get("/item/category/city").then(res=>{
                    this.cityRows = res.data
                    var val = this.provinList[0].provinceid;
                    this.cityList = this.cityRows.filter(function (x) { return x.provinceid == val });
                    this.citySelected = this.cityList.length>0 ? this.cityList[0].id : "";
                })


                //页面加载
                this.loadData();
            },
            methods:{
                loadData(){
                    ly.verifyUser().then(resp=>{
                        this.user=resp.data
                        ly.http.get("/user/query").then(res=>{
                            this.addrList=res.data;
                        })
                    }).catch(()=>{
                        window.location = "login.html?returnUrl=" + window.location;
                    })


                },
                changevalue(c){
                    this.an=c;
                    this.address.an=c
                },
                submit(){
                    this.address.province=this.provinRows[this.provinSelected-1].province
                    this.address.city=this.cityRows[this.citySelected-1].city
                    this.address.uarea=this.areaRows[this.areaSelected-1].area
                    if(this.isEdit==false){
                        ly.http.post("/user/addAddress",this.address).then(()=>{
                            alert("保存成功")
                            this.loadData();
                        }).catch(()=>{
                            alert("保存失败")
                        })
                    }else{
                        ly.http.put("/user/addAddress",this.address).then(()=>{
                            alert("修改成功")
                            this.loadData();
                        }).catch(()=>{
                            alert("修改失败")
                        })
                    }

                },
                //修改电话的值
                newItem(item){
                    item=item+"";
                    item=item.substring(0,3)+"****"+item.substring(item.length-4)
                    return item

                },
                //设置为默认
                setDefault(id){
                    ly.http.post("/user/setDefault/"+id).then(()=>{
                        alert("设置成功")
                        this.loadData();
                    }).catch(()=>{
                        alert("设置失败")
                    })
                },
                //删除地址
                deleteAddress(id){
                    ly.http.delete("/user/deleteAdd/"+id).then(()=>{
                        alert("删除成功")
                        this.loadData();
                    }).catch(()=>{
                        alert("删除失败")
                    })
                },
                //新增地址
                addAddress(){
                    this.isEdit=false;
                    this.address={};
                    this.editAddress={}
                    this.provinSelected=1
                },
                //编辑地址
                editItem(id){
                    this.isEdit=true;
                    ly.http.get("/user/address/"+id).then(resp=>{
                        this.editAddress=resp.data

                    })

                }
            },
            watch:{
                provinSelected:function(val) {
                    this.cityList=[];
                    this.cityRows.forEach(city=>{
                        if(city.provinceid==this.provinRows[val-1].provinceid){
                            this.cityList.push(city)
                        }
                    })
                    if(this.editAddress.city!=null){
                        this.cityList.forEach(ci=>{
                            if(ci.city==this.editAddress.city){
                                this.citySelected=ci.id;
                            }
                        })
                    }else{
                        this.citySelected = this.cityList.length>0 ? this.cityList[0].id: "";
                    }

                },

                citySelected:function (val) {
                    this.areaList=[]
                    this.areaRows.forEach(area=>{
                        if (area.cityid==this.cityRows[val-1].cityid){
                            this.areaList.push(area)
                        }
                    })
                    if(this.editAddress.uarea!=null){
                        this.areaList.forEach(ar=>{
                            if(ar.area==this.editAddress.uarea){
                                this.areaSelected=ar.id;
                            }
                        })
                    }else{
                        this.areaSelected = this.areaList.length>0 ? this.areaList[0].id : "";
                    }
                },
                //监控editAddress
                editAddress:function(val){
                    this.address=val;
                    this.an=val.an
                    this.provinRows.forEach(pro=>{
                        if(pro.province==val.province){
                            this.provinSelected=pro.id;
                        }
                    })

                }
            }
        })
    </script>


</html>